// 封装获取id元素函数
function $(id) {
  return document.getElementById(id);
};

// 封装清空旧数据的函数
function cleanDom() {
  $("main").innerHTML = `
  <h2>
  <strong>Person</strong>
  <span>Wealth</span>
  </h2> 
  `;

  // 打开状态
  flag = true;
};

// 存当前操作的数据
let nowData = [];
// 初始值
let index = 0;
// 设置开关(用于显示总金额)
let flag = true;


// 给按钮添加点击事件
$("toggle").addEventListener("click", function () {
  // 给body添加显示导航类名
  document.body.classList.toggle("show_nav");
});


// 添加账户
$("add-user").addEventListener("click", function () {
  // 判断是否到达最大值
  if (index >= dataInfo.length) return;

  // 每次添加的数据全部放进nowData数组中保存
  nowData.push(dataInfo[index]);

  // 渲染页面
  let newH2 = document.createElement("h2");
  // `` 模版字符串 es6新语法
  newH2.innerHTML = `
    <strong>${dataInfo[index].name}</strong>
    <span>$ ${(dataInfo[index].money).toLocaleString()}</span>
  `;
  // 判断是否出现总金额
  if (flag) {
    $("main").appendChild(newH2);
  } else {
    // ????
    // 添加节点到总金额元素的前面
    $("main").insertBefore(newH2, $("main").lastElementChild)
  }


  // 自增放后面
  index++;
});


// 资金翻倍
$("double").addEventListener("click", function () {
  // 清空旧数据
  cleanDom();

  nowData.forEach(function (item) {
    // 数据翻倍 (需要重新赋值,改变原数据)
    item.money = item.money * 2;
    // 渲染页面
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);
  });
});

// 查询百万富翁
$("show-millionaire").addEventListener("click", function () {
  // 清空旧数据
  cleanDom();

  // 过滤nowData数据, 是否存在1000000
  nowData = nowData.filter(function (item) {
    return item.money >= 1000000;
  });

  nowData.forEach(function (item) {
    // 渲染页面
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);
  });
});


// 财富榜
$("sort").addEventListener("click", function () {
  // 清空旧数据
  cleanDom();

  // 对nowData数据的money进行排序 (从大到小排序)
  nowData.sort(function (a, b) {
    return b.money - a.money;
  });

  nowData.forEach(function (item) {
    // 渲染页面
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);
  });
});


// 计算总额
$("calculate").addEventListener("click", function () {
  let sum = 0;
  // 累加
  sum = nowData.reduce(function (total, current, currentIndex, arr) {
    return total += current.money;
  }, 0);

  let newH2 = document.createElement("h2");
  // `` 模版字符串 es6新语法
  newH2.innerHTML = `
    <strong>总金额</strong>
    <span>$ ${(sum).toLocaleString()}</span>
    `;
  
  // 判断是否可以继续显示总金额
  if (flag) {
    $("main").appendChild(newH2);
    // 关闭状态
    flag = false;
  };

});
// let body = document.querySelector('body');
// let toggle = document.querySelector('#toggle');
// let add_user = document.querySelector('#add-user')
// let main = document.querySelector('#main');
// let double = document.querySelector('#double');
// let show_millionaire = document.querySelector('#show-millionaire');
// let h2s = document.querySelectorAll('h2');
// let moneySort = document.querySelector('#sort');
// let moneySum = document.querySelector('#calculate')
// let flag = 1
// let num = 10000;
// let index = 0;
// // console.log(num.toLocaleString()+'.00')
// let dataInfo = [{
//     name: "安东尼 戴维斯",
//     money: 892001
// },
// {
//     name: "凯里 欧文",
//     money: 668932
// },
// {
//     name: "史蒂夫 库里",
//     money: 698756
// },
// {
//     name: "德里克 罗斯",
//     money: 492489
// },
// {
//     name: "保罗 乔治",
//     money: 853957
// },
// {
//     name: "勒布朗 詹姆斯",
//     money: 968472
// },
// {
//     name: "詹姆斯 哈登",
//     money: 718225
// },
// {
//     name: "凯文 杜兰特",
//     money: 889147
// },
// ];
// toggle.addEventListener('click', function () {
//     if (flag == 1) {
//         body.classList.add('show_nav')
//         flag = 2
//     } else {
//         body.classList.remove('show_nav');
//         flag = 1
//     }
// })
// let money = [];
// let money_name = [];

// add_user.addEventListener('click', function () {
//     let classSum = document.querySelector('.sum');
//     if (classSum!=null) {
//         classSum.style.display = 'none';
//     }
//     let h2 = document.createElement('h2');
//     let strong = document.createElement('strong');
//     let span = document.createElement('span');
//     for (let k in dataInfo[index]) {
//         strong.innerHTML = dataInfo[index]['name'];
//         money_name[index] = dataInfo[index]['name'];
//         money[index] = dataInfo[index]['money'];
//         span.innerHTML = `$${money[index].toLocaleString() + '.00'}`;
//         // console.log(money);
//     }
//     h2.appendChild(strong);
//     h2.appendChild(span);
//     main.appendChild(h2);
//     index++

// })
// // let doublemoney = []
// double.addEventListener('click', function () {
//     let classSum = document.querySelector('.sum');
//     if (classSum!=null) {
//         classSum.style.display = 'none';
//     }
//     let spanS = document.querySelectorAll('span');
//     for (let k in money) {
//         let k1 = k * 1 + 1

//         spanS[k1].innerHTML = `$${(money[k] *= 2).toLocaleString() + '.00'}`


//     }
// })

// show_millionaire.addEventListener('click', function () {

//     let h2Long = document.querySelectorAll('#main>h2');
//     for (let i = 0; i < money.length; i++) {
//         if (money[i] <= 1000000) {
//             h2Long[i + 1].remove()
//             index--;
//         }
//     }

// })

// moneySort.addEventListener('click', function () {
//     let h2Long = document.querySelectorAll('#main>h2')
//     for (let i = 1; i < h2Long.length; i++) {
//         h2Long[i].remove()
//         // index--;
//     }
//     for (let i = 0; i < money.length; i++) {
//         for (let j = 0; j < money.length - i; j++) {
//             if (money[j] < money[j + 1]) {
//                 let more = money[j];
//                 money[j] = money[j + 1];
//                 money[j + 1] = more;
//                 let more_name = money_name[j];
//                 money_name[j] = money_name[j + 1];
//                 money_name[j + 1] = more_name;
//             }
//         }
//     }
//     money.forEach(function (item, index) {
//         let h2 = document.createElement('h2');
//         let strong = document.createElement('strong');
//         let span = document.createElement('span');
//         strong.innerHTML = money_name[index];
//         span.innerHTML = `$${item.toLocaleString() + '.00'}`;
//         h2.appendChild(strong);
//         h2.appendChild(span);
//         main.appendChild(h2);
//     })

// })
// moneySum.addEventListener('click', function () {
//     let classSum = document.querySelector('.sum');
//     if (classSum!=null) {
//         classSum.style.display = 'none';
//     }
//     console.log(classSum);
//     let h2 = document.createElement('h2');
//     let sum = 0;
//     money.forEach(function (item) {
//         sum += item
//     })
//     h2.innerHTML = `<strong>合计</strong><span>$${sum.toLocaleString() + '.00'}</span>`;
//     h2.classList.add('sum')
//     main.appendChild(h2);
//     sumNone()
// })

// function sumNone() {
//     let h2Long = document.querySelectorAll('#main>h2');
//     h2Long.forEach(function () {
        
//     })
// }
//